<template>
    <div class="enterprise-certificates">
        <div class="enterprise-certificates__content">
            <el-container class="certificates">
                <el-header class="certificates__header">
                    <div class="certificates__header-main">
                        <el-input size="small" clearable v-model="searchKey" placeholder="企业名称 / 证书编号"
                            class="management__headerInput" style="width: 300px" />
                        <el-button type="primary" style="margin-right: 88px" @click="refresh" size="small">搜索</el-button>

                        <el-button type="success" style="margin-right: 88px" @click="openDialog('add')"
                            size="small">添加证书</el-button>
                    </div>
                </el-header>
                <el-main class="certificates__content">
                    <div ref="container" class="table-container">
                        <el-table ref="table" :data="datas" style="width: 100%" align="center" header-align="center">
                            <el-table-column label="企业名称" prop="enterpriseName" width="200" />
                            <el-table-column label="证书名称" prop="certificateTypeName" />
                            <el-table-column label="级别" prop="nationalLevel" width="80" />
                            <el-table-column label="证书编号" prop="certificateNumber" />
                            <el-table-column label="证书开始时间" prop="validityStartDate" />
                            <el-table-column label="证书截止时间" prop="validityEndDate" />
                            <el-table-column label="年检时间" width="200">
                                <template slot-scope="scope">
                                    <div class="annualInspectionYears" v-for="item in scope.row.annualInspectionYears || []" :key="item">
                                        {{ $formatTime(item) }} &nbsp;
                                    </div>
                                </template>

                            </el-table-column>
                            <!-- <el-table-column label="备注" prop="remarks" /> -->
                            <el-table-column label="操作" width="200px">
                                <template slot-scope="scope">

                                    <inspection-years :formData="scope.row" @refresh="fetchDatas" />

                                    <el-button size="small" type="primary"
                                        @click="openDialog('edit', scope.row)">编辑</el-button>

                                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>

                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-main>
                <div class="pagination-container">
                    <el-pagination v-if="total" :current-page="pageNum" :page-size="pageSize"
                        layout="prev, pager, next, total" :total="total" background @current-change="handlePageChange" />
                </div>
            </el-container>
        </div>

        <dialog-edit :visible.sync="dialogVisible" v-if="dialogVisible" @refresh="fetchDatas" ref="edit"></dialog-edit>

    </div>
</template>

<script>

import dialogEdit from "./components/edit.vue";
import inspectionYears from "./components/inspection-years.vue"

export default {
    name: "enterprise-certificates",
    components: {
        dialogEdit,
        inspectionYears
    },
    data() {
        return {
            searchKey: "",
            pageNum: 1,
            pageSize: 20,
            total: 0,
            datas: [],
            dialogVisible: false,
        };
    },

    mounted() {
        this.refresh();
    },

    methods: {
        handlePageChange(pageNum) {
            this.pageNum = pageNum;
            this.fetchDatas();
        },
        async fetchDatas() {
            const params = {
                search: this.searchKey,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };
            const loading = this.$loading();
            const { data, code } = await this.$fetch.get(
                "/api/enterprise-certificates/list",
                params
            );
            loading.close();
            if (code === 0) {
                this.datas = data.sorts.map((item) => {
                    const { validityStartDate, validityEndDate } = item
                    return {
                        ...item,
                        validityStartDate: this.$formatTime(validityStartDate),
                        validityEndDate: this.$formatTime(validityEndDate),
                    };
                });
                this.total = data.total;
            }


            this.$nextTick(() => {
                this.$refs.table.bodyWrapper.scrollTop = 0;
            });
        },
        refresh() {
            this.pageNum = 1;
            this.fetchDatas();
        },


        openDialog(type, row) {
            this.dialogVisible = true;
            this.$nextTick(() => {
                this.$refs.edit.init(type, row);
            })
        },

        handleDelete(items) {
            this.$confirm("是否删除此证书", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                const { code } = await this.$fetch.post(`/api/enterprise-certificates/delete`, items);
                if (code === 0) {
                    this.$message.success("删除成功");
                    this.refresh();
                }
            }).catch(() => {
                this.refresh();
            });
        },
    },
};
</script>

<style scoped lang="scss">
.enterprise-certificates {
    display: flex;
    flex-direction: column;
}

.enterprise-certificates__content {
    display: flex;
    flex-direction: row;

    .content-tree {
        width: 300px;

        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 14px;
            padding-right: 8px;
        }
    }

    .content-table {
        flex: 1;
    }
}

.certificates {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    flex: 1;

    .certificates__header {
        display: flex;
        align-items: center;

        .certificates__header-main {
            height: 40px;
            display: flex;
            align-items: center;

            .management__headerInput {
                margin-right: 20px;
            }
        }
    }

    .certificates__content {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;
        padding-bottom: 0;

        .table-container {
            flex: 1;
            overflow: hidden;
            overflow-y: auto;

            .table-container-first {
                display: flex;
                align-items: center;
                justify-content: center;

                .first-content {
                    flex: 1;
                }


            }
        }
    }

    .pagination-container {
        display: flex;
        justify-content: center;
        padding: 10px 0;

        .el-pagination {
            padding: 20px 0;
        }
    }
}

::v-deep .el-table {
    display: flex;
    height: 100%;
    /* overflow: auto; */
    flex-direction: column;

    .el-table__body-wrapper {
        flex: 1;
        overflow-y: auto;
    }

    .cell {
        width: 100%;
        height: 100%;
        padding: 0;
        padding-right: 10px;
    }

    .annualInspectionYears {
        width: 80px;
        display: inline-flex;
    }

}

.text-overflow {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
</style>